Creating animated controls

To create a reusable control that responds to user interaction with an animation:

Create a prefab for your control. See Using prefabs.
For example, create a Button 3D with a Box.
In the Project double-click the prefab to open it in the Preview in a separate tab.
When you open a prefab in a separate Preview tab you can see what the prefab looks like and you can edit it without instantiating it.
Animate the mesh in your control. See Creating keyframe animations.
For example, create an animation that scales the Box in the Button 3D.
Connect an event of the control with the animation.
For example, set the Button: Click trigger of the Button 3D to trigger the animation:
1. In the Project select your control in the Prefabs.
  For example, if you created a Button 3D, select it.
2. In the Triggers click the Add drop-down menu for the Button: Click trigger and select the Play Animation action.
3. In the Play Animation editor:
  - In General tab set:
    - Target Item to the mesh inside the control.
      For example, if you created a Box, use a relative path and enter ./Box.
    - Animation to the animation you want to use to animate your control when a user interacts with it.
  - In Advanced tab set:
    - Playback Mode to Ping pong. Ping pong first plays the animation as it is defined in the animation and then plays the animation in reverse.
In the Preview click the Scene tab and in the Project drag the prefab to the object in the scene graph where you want to use it.
For example, create a Stack Layout 3D and drag several instances of the control you created.
Click the control in the Preview to try it out.
You can reuse this control anywhere in your Kanzi application.
Make sure that the Preview is not in the Edit mode. See Controlling the Preview

Creating animated controls

See also